<div
	class="fixed inset-0 z-50 py-16 overflow-y-auto bg-opacity-50 md:px-6 overscroll-contain"
	[ngClass]="['bg' + contrast]"
	(click)="close()"
>
	<button
		(click)="close()"
		class="fixed p-3 rounded top-2 right-2"
		[ngClass]="['bg' + defaultInv, 'text' + default]"
		data-cy="fullscreen-modal-close-button"
	>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4">
			<polygon
				fill="currentColor"
				points="204 181.372 38.628 16 16 16 16 38.628 181.372 204 44 204 44 236 236 236 236 44 204 44 204 181.372"
			/>
			<polygon
				fill="currentColor"
				points="326.628 304 464 304 464 272 272 272 272 464 304 464 304 326.628 473.372 496 496 496 496 473.372 326.628 304"
			/>
		</svg>
	</button>
	<div #content class="mx-auto" (click)="$event.stopPropagation()"></div>
</div>
